{extend name="base" /}
{block name="css"}
<style>
    .tdImg {
        width: 85px;
        height: 85px;
        cursor: zoom-in;
        border-radius: 10%;
        border: 2px solid #dddddd;
        border: none;
    }
</style>
{/block}
{block name="body"}
<div class="layui-card">
        <table id="tableList" lay-filter="tableList"></table>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete"><i class="fa fa-trash-o"></i>{:__('Multiple choice deletion')}</button>
        <button class="layui-btn layui-btn-sm" lay-event="refresh"><i class="layui-icon layui-icon-refresh-3"></i>{:__('Refresh')}</button> 
    </div>
</script>
      <!-- 表格操作列 -->
    <script type="text/html" id="tableTBTrack">
        <a href="{:url('image/view')}?id={{d.id}}" class="layui-btn layui-btn-sm ajax-iframe" data-width="410px" data-height="310px">{:__('see')}</a>
        <a href="{:url('image/del')}?id={{d.id}}" class="layui-btn layui-btn-danger layui-btn-sm ajax-delete" tiptext="确认删除<img width='40' height='20' src='{{d.url}}'/>"><i class="layui-icon layui-icon-delete"></i>删除</a>
    </script>
</div>
{/block}
{block name="js"}
<script>
    layui.use(['layer', 'form', 'table', 'upload'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var upload = layui.upload;

        // 渲染回访表格
        var insTb = table.render({
            elem: '#tableList',
            toolbar: '#toolbarDemo',  //开启头部工具栏，并为其绑定左侧模板
            url: "{:url('image/index_json')}",  // 请求数据路由地址
            page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
            layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'] //自定义分页布局
                 //,curr: 5 //设定初始在第 5 页
            ,groups: 5 //只显示 1 个连续页码
            ,first: false //不显示首页
            ,last: false //不显示尾页
            ,prev: '<em>上一页</em>'
            ,next: '<em>下一页</em>'
            ,first: '<em>首页</em>' //不显示首页
            ,last: '<em>尾页</em>' //不显示尾页
            ,limit:'15'
            ,limits:['15','30','50','100','200','500']
            } ,
            lineStyle: 'height: 100px;',//图片高度
            even:true,
            cols: [[
                  {
                    type: 'checkbox'
                }, {
                    type:'numbers',
                    title:'#', 
                    width: 60
                }, {
                    field: 'image', 
                    align: 'center', 
                    templet: function (d) {
                        var url = d.image;
                        return '<img width="290" src="' + url + '" class="tdImg" tb-img/>';
                    }, 
                    title: '图片', 
                    width: 150, 
                    unresize: true
                }, {
                    field: 'file_size', title: '文件大小', align: 'center', width: 180, templet: function (d) {
                        return bytesToSize(d.file_size);
                    }
                }, {
                    field: 'mine', 
                    title: '图片类型', 
                    align: 'center', 
                    width: 150
                }, {
                    field: 'types', 
                    title: '类型/路径', 
                    align: 'center', 
                    width: 300
                }, {
                    field: 'create_time', 
                    title: '添加时间', 
                    align: 'center', 
                    width: 200
                }, {
                    field: 'status', 
                    title: '状态', 
                    align: 'center', 
                    width: 80,
                    templet:function (d) {
                        return  d.status ? ' <i class="layui-icon layui-icon-ok-circle" style="font-size: 25px; color: #009688;"></i>' : '<i class="layui-icon layui-icon-close-fill" style="font-size: 25px; color: #FF5722;"></i>';
                    }
                }, {
                    align: 'center', 
                    toolbar: '#tableTBTrack', 
                    title: '操作', 
                    minWidth: 200
                }
            ]],
            parseData: function(res){ //res 即为原始返回的数据
                return {
                  "code": res.code, //解析接口状态
                  "msg": res.msg, //解析提示文本
                  "count": res.data.total, //解析数据长度
                  "data": res.data.data //解析数据列表
                };
            }
        });
        
        // 点击图片放大
        $(document).off('click.tbImg').on('click.tbImg', '[tb-img]', function () {
            layer.photos({photos: {data: [{src: $(this).attr('src')}]}, shade: .1, closeBtn: true});
        });
 
  //头工具栏事件
        table.on('toolbar(tableList)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'delete':
             
                    var data = checkStatus.data;
                    var ids = [];
                    data.forEach(item => {
                        ids.push(item.id);
                    });
                    if (ids <= 0) {return layer.msg('{:__('Please select a line')}', {icon: 0});}
                layer.confirm('<i class="layui-icon layui-icon-help" style="font-size: 16px; color: #1E9FFF;"></i>确定删除?', function (index) {
                 var index = layer.msg('提交中，请稍候', {icon: 16,time: false,shade: 0.3});
                  $.post('/image/del', {id: ids}, function (res) {
                        if (res.code == 0) {
                            layer.msg(res.msg, {icon: 1});
                            setTimeout(function () {
                                location.reload();  // 页面刷新
                            }, 1500)
                        } else {
                            layer.msg(res.msg, {icon: 0});
                        }
                    }, 'json');
                  });
                    break;
                case 'refresh':
                    location.reload();
                    break;
            }
        });
       });

function bytesToSize(bytes) {
  if (bytes === 0) return '0 B';

  const k = 1024;
  const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));

  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}

</script>
{/block}